22. august 2025Dansk

Lås op for Reacts `createPortal` til avanceret UI-styring, modaler, tooltips og omgåelse af CSS z-index begrænsninger.

Mestring af UI-overlejringer: Et dybdegående kig på Reacts `createPortal`-funktion

I moderne webudvikling er skabelsen af problemfrie og intuitive brugergrænseflader altafgørende. Ofte indebærer dette at vise elementer, der skal bryde ud af deres forældrekomponents DOM-hierarki. Tænk på modale dialoger, notifikationsbannere, tooltips eller endda komplekse kontekstmenuer. Disse UI-elementer kræver ofte speciel håndtering for at sikre, at de gengives korrekt, lagdelt over andet indhold uden indblanding fra CSS z-index stablekontekster.

React, i sin fortsatte udvikling, tilbyder en kraftfuld løsning på netop denne udfordring: createPortal-funktionen. Denne funktion, tilgængelig via react-dom, giver dig mulighed for at gengive underkomponenter i en DOM-node, der eksisterer uden for det normale React-komponenthierarki. Dette blogindlæg vil fungere som en omfattende guide til at forstå og effektivt udnytte createPortal, udforske dets kernekoncepter, praktiske anvendelser og bedste praksis for et globalt udviklingsteam.

Hvad er `createPortal` og hvorfor bruge det?

Kernen i React.createPortal(child, container) er en funktion, der gengiver en React-komponent (child) i en anden DOM-node (container) end den, der er en forælder til React-komponenten i React-træet.

Lad os nedbryde parametrene:

child: Dette er React-elementet, strengen eller fragmentet, du vil gengive. Det er essentielt det, du normalt ville returnere fra en komponents render-metode.
container: Dette er et DOM-element, der eksisterer i dit dokument. Det er målet, hvor child vil blive tilføjet.

Problemet: DOM-hierarki og CSS stablekontekster

Overvej et almindeligt scenarie: en modal dialog. Modaler er typisk beregnet til at blive vist oven på alt andet indhold på siden. Hvis du gengiver en modal komponent direkte i en anden komponent, der har en begrænsende overflow: hidden stil eller en specifik z-index værdi, kan modalen blive beskåret eller forkert lagdelt. Dette skyldes DOM'ens hierarkiske natur og CSS's z-index stablekontekstregler.

En z-index værdi på et element påvirker kun dets stableorden i forhold til dets søskende inden for den samme stablekontekst. Hvis et forælder-element etablerer en ny stablekontekst (f.eks. ved at have en position, der er anderledes end static, og en z-index), vil børn gengivet inden for den forælder være begrænset til den kontekst. Dette kan føre til frustrerende layoutproblemer, hvor din tilsigtede overlejring er begravet under andre elementer.

Løsningen: `createPortal` til undsættelse

createPortal løser elegant dette ved at bryde den visuelle forbindelse mellem komponentens position i React-træet og dens position i DOM-træet. Du kan gengive en komponent inden i en portal, og den vil blive tilføjet direkte til en DOM-node, der er en søskende eller et barn af body, hvilket effektivt omgår de problematiske forælder-stablekontekster.

Selvom portalen gengiver sit barn i en anden DOM-node, fungerer den stadig som en normal React-komponent inden i dit React-træ. Dette betyder, at begivenheds-propagering fungerer som forventet: Hvis en begivenhedshåndtering er knyttet til en komponent, der er gengivet af en portal, vil begivenheden stadig boble op gennem React-komponenttræet, ikke kun DOM-træet.

Nøgleanvendelser for `createPortal`

createPortals alsidighed gør det til et uundværligt værktøj til forskellige UI-mønstre:

1. Modale vinduer og dialoger

Dette er måske den mest almindelige og overbevisende anvendelse. Modaler er designet til at afbryde brugerens arbejdsgang og kræve opmærksomhed. At gengive dem direkte i en komponent kan føre til stablekontekstproblemer.

Eksempelscenarie: Forestil dig en e-handelsapplikation, hvor brugere skal bekræfte en ordre. Bekræftelsesmodalen skal vises over alt andet på siden.

Implementeringsidé:

Opret et dedikeret DOM-element i din public/index.html fil (eller opret et dynamisk). En almindelig praksis er at have en <div id="modal-root"></div>, ofte placeret i slutningen af <body>-tagget.
I din React-applikation skal du få en reference til denne DOM-node.
Når din modal-komponent udløses, skal du bruge ReactDOM.createPortal til at gengive modalens indhold i modal-root DOM-noden.

Kodeeksempel (Konceptuelt):

            // App.js
import React from 'react';
import Modal from './Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    <div>
      <h1>Velkommen til vores globale butik!</h1>
      <button onClick={() => setIsModalOpen(true)}>Vis bekræftelse</button>
      {isModalOpen && (
        <Modal onClose={() => setIsModalOpen(false)}>
          <h2>Bekræft dit køb</h2>
          <p>Er du sikker på, at du vil fortsætte?</p>
        </Modal>
      )}
    </div>
  );
}

export default App;

// Modal.js
import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function Modal({ children, onClose }) {
  // Opret et DOM-element, som modal-indholdet skal bo i
  const element = document.createElement('div');

  React.useEffect(() => {
    // Tilføj elementet til modal-roden, når komponenten monteres
    modalRoot.appendChild(element);
    // Ryd op ved at fjerne elementet, når komponenten afmonteres
    return () => {
      modalRoot.removeChild(element);
    };
  }, [element]);

  return ReactDOM.createPortal(
    <div className="modal-backdrop">
      <div className="modal-content">
        {children}
        <button onClick={onClose}>Luk</button>
      </div>
    </div>,
    element // Gengiv i det element, vi har oprettet
  );
}

export default Modal;

Denne tilgang sikrer, at modalen er et direkte barn af modal-root, som typisk er knyttet til body, og dermed omgår eventuelle mellemliggende stablekontekster.

2. Tooltips og Popovers

Tooltips og popovers er små UI-elementer, der vises, når en bruger interagerer med et andet element (f.eks. fører musen hen over en knap eller klikker på et ikon). De skal også vises over andet indhold, især hvis udløser-elementet er dybt indlejret i et komplekst layout.

Eksempelscenarie: På en international samarbejdsplatform fører en bruger musen hen over en teammedlems avatar for at se deres kontaktoplysninger og tilgængelighedsstatus. Tooltipet skal være synligt uanset avatarens forældrecontainerens styling.

Implementeringsidé: Ligesom med modaler kan du oprette en portal til at gengive tooltips. Et almindeligt mønster er at knytte tooltipet til en fælles portalrod, eller endda direkte til body, hvis du ikke har en specifik portalcontainer.

Kodeeksempel (Konceptuelt):

            // Tooltip.js
import React from 'react';
import ReactDOM from 'react-dom';

function Tooltip({ children, targetElement }) {
  if (!targetElement) return null;

  // Gengiv tooltip-indholdet direkte i body
  return ReactDOM.createPortal(
    <div className="tooltip">
      {children}
    </div>,
    document.body
  );
}

// Forældrekomponent, der udløser tooltipet
function InfoButton({ info }) {
  const [targetRef, setTargetRef] = React.useState(null);
  const [showTooltip, setShowTooltip] = React.useState(false);

  return (
    <div
      ref={setTargetRef} // Hent DOM-elementet af denne div
      onMouseEnter={() => setShowTooltip(true)}
      onMouseLeave={() => setShowTooltip(false)}
      style={{ position: 'relative', display: 'inline-block' }}
    >
      ? {/* Informationsikon */}
      {showTooltip && <Tooltip targetElement={targetElement}>{info}</Tooltip>}
    </div>
  );
}

3. Dropdown-menuer og vælg-bokse

Brugerdefinerede dropdown-menuer og vælg-bokse kan også have gavn af portaler. Når en dropdown åbnes, skal den ofte udvides ud over dens forældrecontainers grænser, især hvis den container har egenskaber som overflow: hidden.

Eksempelscenarie: Et multinationalt firmas interne dashboard indeholder en brugerdefineret vælger-dropdown til at vælge et projekt fra en lang liste. Dropdown-listen bør ikke være begrænset af bredden eller højden på det dashboard-widget, den befinder sig i.

Implementeringsidé: Gengiv dropdown-mulighederne i en portal knyttet til body eller en dedikeret portalrod.

4. Notifikationssystemer

Globale notifikationssystemer (toast-meddelelser, advarsler) er en anden fremragende kandidat til createPortal. Disse meddelelser vises typisk på en fast position, ofte øverst eller nederst på visningsvinduet, uafhængigt af den aktuelle scrollposition eller forældrekomponentens layout.

Eksempelscenarie: En rejsebooking-side viser bekræftelsesmeddelelser for succesfulde bookinger eller fejlmeddelelser for mislykkede betalinger. Disse notifikationer skal vises konsekvent på brugerens skærm.

Implementeringsidé: En dedikeret notifikationscontainer (f.eks. <div id="notifications-root"></div>) kan bruges med createPortal.

Sådan implementeres `createPortal` i React

Implementering af createPortal involverer et par nøgletrin:

Trin 1: Identificer eller opret en mål-DOM-node

Du har brug for et DOM-element uden for den standard React-rod for at fungere som container for dit portalindhold. Den mest almindelige praksis er at definere dette i din primære HTML-fil (f.eks. public/index.html).

            <!-- public/index.html -->
<body>
  <noscript>Du skal have JavaScript aktiveret for at køre denne app.</noscript>
  <div id="root"></div>
  <div id="modal-root"></div>      <!-- Til modaler -->
  <div id="tooltip-root"></div>     <!-- Valgfrit til tooltips -->
</body>

Alternativt kan du dynamisk oprette et DOM-element inden for din applikations livscyklus ved hjælp af JavaScript, som vist i modal-eksemplet ovenfor, og derefter tilføje det til DOM'en. Dog er forhåndsdefinition i HTML generelt renere for vedvarende portalrødder.

Trin 2: Få en reference til mål-DOM-noden

I din React-komponent skal du få adgang til denne DOM-node. Du kan gøre dette ved hjælp af document.getElementById() eller document.querySelector().

            // Et sted i din komponent eller hjælpefil
const modalRootElement = document.getElementById('modal-root');
const tooltipRootElement = document.getElementById('tooltip-root');

// Det er afgørende at sikre, at disse elementer eksisterer, før du forsøger at bruge dem.
// Du vil måske tilføje kontroller eller håndtere tilfælde, hvor de ikke findes.

Trin 3: Brug `ReactDOM.createPortal`

Importer ReactDOM og brug createPortal-funktionen, hvor du passerer din komponents JSX som det første argument og mål-DOM-noden som det andet.

Eksempel: Gengivelse af en simpel meddelelse i en portal

            // MessagePortal.js
import React from 'react';
import ReactDOM from 'react-dom';

function MessagePortal({ message }) {
  const portalContainer = document.getElementById('modal-root'); // Antager, at du bruger modal-root til dette eksempel

  if (!portalContainer) {
    console.error('Portalcontainer "modal-root" blev ikke fundet!');
    return null;
  }

  return ReactDOM.createPortal(
    <div style={{ position: 'fixed', bottom: '20px', left: '50%', transform: 'translateX(-50%)', backgroundColor: 'rgba(0,0,0,0.7)', color: 'white', padding: '10px', borderRadius: '5px' }}
    >
      {message}
    </div>,
    portalContainer
  );
}

export default MessagePortal;

// I en anden komponent...
function Dashboard() {
  return (
    <div>
      <h1>Dashboard oversigt</h1>
      <MessagePortal message="Data synkroniseret succesfuldt!" />
    </div>
  );
}

Håndtering af tilstand og begivenheder med portaler

En af de mest betydningsfulde fordele ved createPortal er, at den ikke bryder Reacts begivenhedshåndteringssystem. Begivenheder fra elementer, der er gengivet inde i en portal, vil stadig boble op gennem React-komponenttræet, ikke kun DOM-træet.

Eksempelscenarie: En modal dialog kan indeholde en formular. Når en bruger klikker på en knap inde i modalen, skal klikbegivenheden håndteres af en begivenhedshåndtering i forældrekomponenten, der styrer modalens synlighed, og ikke blive fanget inden for modalens DOM-hierarki.

Illustrativt eksempel:

            // ModalWithEventHandling.js
import React from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

function ModalWithEventHandling({ children, onClose }) {
  const modalContentRef = React.useRef(null);

  // Brug af useEffect til at oprette og rydde op i DOM-elementet
  const [wrapperElement] = React.useState(() => document.createElement('div'));

  React.useEffect(() => {
    modalRoot.appendChild(wrapperElement);
    return () => {
      modalRoot.removeChild(wrapperElement);
    };
  }, [wrapperElement]);

  // Håndter klik uden for modal-indholdet for at lukke det
  const handleOutsideClick = (event) => {
    if (modalContentRef.current && !modalContentRef.current.contains(event.target)) {
      onClose();
    }
  };

  return ReactDOM.createPortal(
    <div className="modal-backdrop" onClick={handleOutsideClick}>
      <div className="modal-content" ref={modalContentRef}>
        {children}
        <button onClick={onClose}>Luk modal</button>
      </div>
    </div>,
    wrapperElement
  );
}

// App.js (bruger modalen)
function App() {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <div>
      <h1>App Indhold</h1>
      <button onClick={() => setShowModal(true)}>Åbn modal</button>
      {showModal && (
        <ModalWithEventHandling onClose={() => setShowModal(false)}>
          <h2>Vigtig information</h2>
          <p>Dette er indhold inde i modulen.</p>
          <button onClick={() => alert('Knap inde i modal klikket!')}>
            Handlingsknap
          </button>
        </ModalWithEventHandling>
      )}
    </div>
  );
}

I dette eksempel kalder klik på Luk Modal-knappen korrekt onClose-proppen, der er passeret fra den overordnede App-komponent. Ligeledes, hvis du havde en begivenhedshåndtering for klik på modal-backdrop, ville den korrekt udløse handleOutsideClick-funktionen, selvom modulen er gengivet i en separat DOM-undertræ.

Avancerede mønstre og overvejelser

Dynamiske portaler

Du kan oprette og fjerne portalbeholdere dynamisk baseret på din applikations behov, selvom vedligeholdelse af vedvarende, foruddefinerede portalrødder ofte er enklere.

Portaler og server-side rendering (SSR)

Når du arbejder med server-side rendering (SSR), skal du være opmærksom på, hvordan portaler interagerer med den indledende HTML. Da portaler gengives i DOM-noder, der muligvis ikke eksisterer på serveren, skal du ofte betinget gengive portalindhold eller sikre, at mål-DOM-noderne er til stede i SSR-outputtet.

Et almindeligt mønster er at bruge en hook som useIsomorphicLayoutEffect (eller en brugerdefineret hook, der prioriterer useLayoutEffect på klienten og falder tilbage til useEffect på serveren) for at sikre, at DOM-manipulation kun sker på klienten.

            // usePortal.js (et almindeligt hjælpe-hook-mønster)
import React, { useRef, useEffect } from 'react';

function usePortal(id) {
  const modalRootRef = useRef(null);

  useEffect(() => {
    let currentModalRoot = document.getElementById(id);
    if (!currentModalRoot) {
      currentModalRoot = document.createElement('div');
      currentModalRoot.setAttribute('id', id);
      document.body.appendChild(currentModalRoot);
    }
    modalRootRef.current = currentModalRoot;

    // Oprydningsfunktion til at fjerne det oprettede element, hvis det blev oprettet af dette hook
    return () => {
      // Vær forsigtig med oprydning; fjern kun, hvis det faktisk blev oprettet her
      // En mere robust tilgang kunne indebære sporing af elementoprettelse.
    };
  }, [id]);

  return modalRootRef.current;
}

export default usePortal;

// Modal.js (bruger hooket)
import React from 'react';
import ReactDOM from 'react-dom';
import usePortal from './usePortal';

function Modal({ children, onClose }) {
  const portalTarget = usePortal('modal-root'); // Brug vores hook

  if (!portalTarget) return null;

  return ReactDOM.createPortal(
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>{/* Forhindrer lukning ved klik indeni */}
        {children}
      </div>
    </div>,
    portalTarget
  );
}

Til SSR ville du typisk sikre, at modal-root div'en eksisterer i din server-gengivne HTML. React-applikationen på klienten ville derefter tilknytte sig den.

Styling af portaler

Styling af elementer inden i en portal kræver nøje overvejelse. Da de ofte er uden for den direkte forælders stylingkontekst, kan du anvende globale stilarter eller bruge CSS-moduler/styled-components til effektivt at styre udseendet af portalindhold.

For overlejringer som modaler skal du ofte bruge stilarter, der:

Fastgør elementet til visningsvinduet (position: fixed).
Dækker hele visningsvinduet (top: 0; left: 0; width: 100%; height: 100%;).
Bruger en høj z-index værdi for at sikre, at den vises oven på alt andet.
Inkluderer en semitransparent baggrund for baggrunden.

Tilgængelighed

Når du implementerer modaler eller andre overlejringer, er tilgængelighed afgørende. Sørg for at håndtere fokus korrekt:

Når en modal åbnes, skal du fange fokus inden i modulen. Brugere bør ikke kunne tabbe uden for den.
Når modulen lukkes, skal fokus returneres til det element, der udløste den.
Brug ARIA-attributter (f.eks. role="dialog", aria-modal="true", aria-labelledby, aria-describedby) til at informere hjælpeteknologier om modalens art.

Biblioteker som Reach UI eller Material-UI leverer ofte tilgængelige modal-komponenter, der håndterer disse bekymringer for dig.

Potentielle faldgruber og hvordan man undgår dem

Glemmer mål-DOM-noden

Den mest almindelige fejl er at glemme at oprette mål-DOM-noden i din HTML eller ikke at referere korrekt til den i din JavaScript. Sørg altid for, at din portalcontainer eksisterer, før du forsøger at gengive i den.

Begivenheds-bobling vs. DOM-bobling

Mens React-begivenheder bobler korrekt gennem portaler, gør native DOM-begivenheder det ikke. Hvis du tilknytter native DOM-begivenhedshåndteringer direkte til elementer inden i en portal, vil de kun boble op i DOM-træet, ikke React-komponenttræet. Hold dig til Reacts syntetiske begivenhedssystem, når det er muligt.

Overlappende portaler

Hvis du har flere typer overlejringer (modaler, tooltips, notifikationer), der alle gengives til body eller en fælles rod, kan håndtering af deres stableorden blive kompleks. Tildeling af specifikke z-index værdier eller brug af et portaladministrationssystem kan hjælpe.

Ydeevneovervejelser

Selvom createPortal i sig selv er effektiv, kan gengivelse af komplekse komponenter inden i portaler stadig påvirke ydeevnen. Sørg for, at dit portalindhold er optimeret, og undgå unødvendige gen-gengivelser.

Alternativer til `createPortal`

Mens createPortal er den idiomatiske React-måde at håndtere disse scenarier på, er det værd at bemærke andre tilgange, du måske støder på eller overvejer:

Direkte DOM-manipulation: Du kunne manuelt oprette og tilføje DOM-elementer ved hjælp af document.createElement og appendChild, men dette omgår Reacts deklarative gengivelse og tilstandsstyring, hvilket gør det mindre vedligeholdelsesvenligt.
Higher-Order Components (HOCs) eller Render Props: Disse mønstre kan abstrahere logikken for portal-gengivelse, men createPortal selv er den underliggende mekanisme.
Komponentbiblioteker: Mange UI-komponentbiblioteker (f.eks. Material-UI, Ant Design, Chakra UI) leverer forudbyggede modal-, tooltip- og dropdown-komponenter, der abstraherer brugen af createPortal og tilbyder en mere bekvem udvikleroplevelse. At forstå createPortal er dog afgørende for at tilpasse disse komponenter eller bygge dine egne.

Konklusion

React.createPortal er en kraftfuld og essentiel funktion til at bygge sofistikerede brugergrænseflader i React. Ved at give dig mulighed for at gengive komponenter i DOM-noder uden for deres React-træhierarki, løser den effektivt almindelige problemer relateret til CSS z-index, stablekontekster og element-overflow.

Uanset om du bygger komplekse modale dialoger til brugerbekræftelse, subtile tooltips til kontekstuel information eller globalt synlige notifikationsbannere, giver createPortal den fleksibilitet og kontrol, der er nødvendig. Husk at administrere dine portal-DOM-noder, håndtere begivenheder korrekt og prioritere tilgængelighed og ydeevne for en virkelig robust og brugervenlig applikation, der er egnet til et globalt publikum med forskellige tekniske baggrunde og behov.

Mestring af createPortal vil utvivlsomt løfte dine React-udviklingsevner og gøre dig i stand til at skabe mere polerede og professionelle UI'er, der skiller sig ud i det stadigt mere komplekse landskab af moderne webapplikationer.